<!-- https://blog.csdn.net/qq_41257129/article/details/88665550 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>div-css</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #container {
        background-color: rgb(246, 232, 213);
        border: 1px solid #000;
        height: 100%;
      }
      #nav-top {
        height: 4%;
        background-color: green;
        border: 1px solid #000;
      }
      #bottm {
        height: 85%;
        width: 75%;
        background-color: rgb(119, 76, 24);
      }
      #content {
        height: 100%;
        width: 100%;
        background-color: rgb(233, 215, 193);
        border: 1px solid #000;
        display: flex;
        justify-content: flex-start;
        align-content: center;
      }
      #left {
        height: 100%;
        width: 15%;
        background-color: orangered;
        border: 1px solid #000;
      }
      #main {
        border: 1px solid #000;
        height: 100%;
        width: 70%;
        background-color: pink;
      }
      #right {
        border: 1px solid #000;
        height: 100%;
        width: 15%;
        background-color: yellowgreen;
      }
      #footer {
        border: 1px solid #000;
        height: 12%;
        width: 100%;
        background-color: blueviolet;
      }
      #sidebar {
        border: 1px solid #000;
        background-color: rgb(32, 3, 3);
        height: 95%;
        width: 25%;
        float: right;
      }
      #login {
        border: 1px solid #000;
        background-color: orangered;
        height: 20%;
        width: 20%;
      }
      #info {
        border: 1px solid #000;
        background-color: pink;
        height: 20%;
        width: 20%;
      }
      #news {
        border: 1px solid #000;
        background-color: orange;
        height: 20%;
        width: 20%;
      }
      #icon {
        border: 1px solid #000;
        background-color: rgb(185, 12, 12);
        height: 20%;
        width: 20%;
      }
      #apps {
        border: 1px solid #000;
        background-color: rgb(44, 26, 148);
        height: 20%;
        width: 20%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="nav-top">导航栏</div>
      <div id="bottm">
        <div id="content">
          <div id="left">正文-左侧</div>
          <div id="main">正文-轮播图</div>
          <div id="right">正文-右侧</div>
        </div>
        <div id="footer">底部栏目</div>
        <div id="sidebar">
          <!-- <div id="login">登录、注册</div>
              <div id="info">信息</div>
              <div id="news">新闻</div>
              <div id="icon">图标</div>
              <div id="apps">APP展示</div> -->
        </div>
      </div>
    </div>
  </body>
</html>
